<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body {
				margin: 0px;
				min-width: 1400px;
				max-width: 1600px;
			}

			.header {
				height: 110px;
				background-image: url(img/top-bg.jpg);
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.language {
				height: 100%;
			}

			.search {
				font-size: 14px;
			}

			.search>#search-input {
				width: 300px;
				height: 30px;
				border: 2px solid #a62721;
				border-radius: 15px;
				display: flex;
				padding-left: 20px;
			}

			.search>#search-input>button {
				width: 80px;
				border-radius: 15px;
				background-color: #a62721;
				border: none;
				outline: none;
				color: wheat;


			}

			.search>#search-input>button;

			article {
				color: white;

			}

			.search>#search-input>input {
				flex-grow: 1;
				border: none;
				outline: none;
				background-color: rgba(0, 0, 0, 0);
			}

			.NAV {
				background: #A62721;
				height: 50px;
				display: flex;
				justify-content: center;
				font-size: 20px;
				align-items: center;
				top:0rem;
				position: sticky;
				z-index: 999;

			}

			.NAV>a {
				width: 250px;
				height: 100%;
				color: navajowhite;
				text-decoration: none;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.NAV>a:hover {
				background-color: #881618;
			}

			#loop {
				min-width: 1400px;
				height: 500px;
				background-image: url(img/banner1.jpg);
				background-repeat: round;
				display: flex;
				justify-content: space-around;
			}

			.NAV2 {
				background: white;
				height: 60px;
				display: flex;
				font-size: 25px;
				justify-content: center;

				align-items: center;

			}

			.NAV2>a {
				width: 250px;
				height: 100%;
				color: black;
				text-decoration: none;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.NAV2>a:hover {
				background-color: rgba(0, 0, 0, 0.1);
			}

			.NEW-2 {

				width: 75px;
				height: 75px;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.4);
			}

			.NEW-2>p {
				font-size: 22px;
				color: white;
				line-height: 35px;
				text-align: center;
				margin: 0px;

			}

			.NEW-2>span {
				width: 75px;
				height: 2px;
				background-color: white;
				display: block;
			}


			.redwine {
				display: flex;
				justify-content: space-between;

			}

			.NAV-foot {
				min-width: 1200px;
				background: #A62721;
				height: 150px;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				margin: 0px;
			}

			.NAV-foot1 {

				width: 75px;
				height: 75px;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, 0.4);
				margin: 0px;
				padding: 0px;
			}

			.NAV-foot2 {
				position: relative;
				top: -15%;
				width: 1000px;
				height: 30px;
				display: flex;
				justify-content: space-around;
				font-size: 20px;
				flex-wrap: wrap;
				margin: 0px;
				padding: 0px;

			}

			.NAV-foot2>a {
				color: wheat;
				text-decoration: none;
			}

			.NAV-foot2>select {
				color: wheat;
				text-decoration: none;
				background-color: #A62721;
				font-size: 20px;
			}

			.NAV-foot3 {
				color: #cecece;
				font-size: 12px;
				;
				width: 1000px;
				border-top: 5px solid wheat;
			}
				
				.banbox {
					width: 1200px;
					height: 400px;
					margin: auto;
					position: relative;
				
				}
				.ban-img {
					height: 400px;
					width: 1200px;
					margin: auto;
					overflow: hidden;
				}
				.ban-img>li{
					list-style-type: none;
				}
				.ban-yq {
					width: 100px;
					height: 20px;
					position: absolute;
					bottom: 20px;
					left:550px;
				}
				 .ban-yq>a{
					width: 20px;
					height: 20px;
					box-sizing: border-box;
					display:inline-block;
					border-radius: 50%;
					border: 2px solid #ffffff;
					margin-left: 8px;
					z-index: 9998px;
				}
				
				.Sizer {
					width: 1200px;
					height: 80px;
					margin: auto;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
				
				 .xllb {
					height: 30px;
					
					top: 30px;
					left: 20px;
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
				
				.xllb>p{
					color:#0E008C;
					float: left;
					font-size: 20px;
				}
				.xllb>select{
					width: 100px;
					height: 28px;
					text-align: center;
					font-size: 16px;
					margin-left: 10px;
				}
				
				.newsbox {
					width: 1200px;
					height: auto;
					margin: auto;
					
				}
				.month{
					width: 1200px;
					overflow: hidden;
					white-space: nowrap;
				}
				
				.news {
					width: 1200px;
					height: auto;
				}
				
				.news>ul{
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
				}
				.news>ul>li{
					width:450px;
					height: 250px;
					display: inline-block;
					margin-left: 70px;
					margin-right: 70px;
					margin-top: 30px;
					position: relative;
					overflow: hidden;
				}
				.first-floor{
					width: 440px;
					height: 40px;
					text-align: center;
					display: block;
					padding: 5px 5px;
					color: white;
					font-size: 14px;
					background-color: rgba(0,0,0,0.7);
					position: absolute;
					bottom: 0px;
					left: 0px;
					transition: all .5s;
					margin: 0px;
				}
				
				.news>ul>li>.news-hover{
					position: absolute;
					top: 260px;
					left: 0px;
					width: 410px;
					height: 210px;
					padding: 20px;
					text-align: center;
					display: block;
					background-color: rgba(0,0,0,0.8);
					color: white;
					text-indent: 2em;
					transition: all .5s;
				}
				.news-hover>a{
					color: #2351CC;
					display: block;
					margin-top: 20px;
				}
				.news>ul>li:hover .news-hover{
					top: 0px!important;
				}
				.news>ul>li:hover .first-floor{
					bottom: -51px!important;
				}
				
				
				
				
		</style>
	</head>
	<body>
		<div class="header">

			<div><img src="img/top-logo.png"></div>

			<div class="search">
				<div id="search-input">
					<input type="text" /><button type="button">搜索</button>
				</div>

				<p>关键词：<span style="color: #cf3232;">葡萄酒</span>&nbsp; 冰酒
					&nbsp; 甜酒&nbsp; 香槟&nbsp; 白葡萄酒&nbsp; 红酒&nbsp; 白酒</p>

			</div>

			<div class="language">
				<a href="#">中文</a>
				<a href="#">English</a>
			</div>
		</div>
		<nav class="NAV">
			<a href="index.html">首页</a>
			<a href="product.html">产品</a>
			<a href="jianjie.html">公司简介</a>
			<a href="news.html">公司新闻</a>
			<a href="callus.html">联系我们</a>
		</nav>
			
			
			<div class="banbox">
				<ul class="ban-img">
					<li><img src="img/news/ban-2(1).jpg"></li>
					<li><img src="img/news/ban-3.jpg"></li>
					<li><img src="img/news/ban-1.jpg"></li>
				</ul>
				<div class="ban-yq">
					<a href="#" class="ban-yqa"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
			
			
			<div class="Sizer">
				<!--下拉选项-->
				<div class="xllb">
					<p>筛选：</p>
					<select>
						<option>2016年</option>
						<option>2015年</option>
						<option>2014年</option>
						<option>2013年</option>
					</select>
					<select>
						<option>10-12月</option>
						<option>7-9月</option>
						<option>4-6月</option>
						<option>1-3月</option>
					</select>
					<select>
						<option>视频</option>
						<option>文章</option>
						<option>图片</option>
					</select>
				</div>
			<div class="search">
				<div id="search-input">
					<input type="text" placeholder="请输入关键字"><button type="button">搜索</button>
				</div>
			</div>
			</div>
			
			<div class="newsbox">
					<!--11月-->
					<div class="news">
						<p class="month">=================================================11月=================================================</p>
						<ul>
							<li>
								<a href=""><img src="img/news/new1.jpg" width="450" height="250"></a>
								<p class="first-floor">“葡酒节”市民尽情品尝木地酒庄产品的美味，为市民提供了愉快的放松环境</p>
								<div class="news-hover">
									<p>2016年10月20日正午12时巴拿马万国博览会在旧金山开幕。旧金山市市长Rolph在开幕式上发表演讲，美国总统伍德罗·威尔逊到会致贺词。美国副总统托马斯·马歇尔及前总统西奥多·罗斯福等国家政要亲临会场助兴。
			博览会开幕的第一天，参观者如潮水涌动，络绎不绝地进入展馆，人数超过20万。出于对古老中国的神秘、好奇感的驱使，当天到中国馆参观的人数达8万人之多.... ....<br>
								</p>
								<a href="#">查看详情</a>
								</div>
							</li>
							<li>
								<a href=""><img src="img/news/new1-2.jpg" width="450" height="250"></a>
								<p class="first-floor">市级领导到木地庄园进行指导和验收，并对该庄园的肯定与支持</p>
								<div class="news-hover">
									<p>2016年10月20日正午12时巴拿马万国博览会在旧金山开幕。旧金山市市长Rolph在开幕式上发表演讲，美国总统伍德罗·威尔逊到会致贺词。美国副总统托马斯·马歇尔及前总统西奥多·罗斯福等国家政要亲临会场助兴。
			博览会开幕的第一天，参观者如潮水涌动，络绎不绝地进入展馆，人数超过20万。出于对古老中国的神秘、好奇感的驱使，当天到中国馆参观的人数达8万人之多.... ....<br>
								</p>
								<a href="#">查看详情</a>
								</div>
							</li>
						</ul>
	
					</div>
						<!--10月-->
					<div class="news">
						<p class="month">=================================================10月=================================================</p>
						<ul>
							<li>
								<a href=""><img src="img/news/new2-1.jpg" width="450px" height="250px"></a>
								<p class="first-floor">葡萄丰收季节，原料猿人在进行收获，产量超出预计，改公司负责人表示超出部分将免费提供给市民品尝</p>
								<div class="news-hover">
									<p>2016年10月20日正午12时巴拿马万国博览会在旧金山开幕。旧金山市市长Rolph在开幕式上发表演讲，美国总统伍德罗·威尔逊到会致贺词。美国副总统托马斯·马歇尔及前总统西奥多·罗斯福等国家政要亲临会场助兴。
			博览会开幕的第一天，参观者如潮水涌动，络绎不绝地进入展馆，人数超过20万。出于对古老中国的神秘、好奇感的驱使，当天到中国馆参观的人数达8万人之多.... ....<br>
								</p>
								<a href="#">查看详情</a>
								</div>
							</li>
							<li>
								<a href=""><img src="img/news/new2-2.jpg" width="450px" height="250px"></a>
								<p class="first-floor">2016年，其酒瓶背标上的广告语写着解放前曾在巴拿马赛会评为世界名酒第二位，这显然不是金奖</p>
								<div class="news-hover">
									<p>2016年10月20日正午12时巴拿马万国博览会在旧金山开幕。旧金山市市长Rolph在开幕式上发表演讲，美国总统伍德罗·威尔逊到会致贺词。美国副总统托马斯·马歇尔及前总统西奥多·罗斯福等国家政要亲临会场助兴。
			博览会开幕的第一天，参观者如潮水涌动，络绎不绝地进入展馆，人数超过20万。出于对古老中国的神秘、好奇感的驱使，当天到中国馆参观的人数达8万人之多.... ....<br>
								</p>
								<a href="#">查看详情</a>
								</div>
							</li>
						</ul>
	
					</div>
							
					<div class="news">
						<p class="month">=================================================09月=================================================</p>
						<ul>
							<li>
								<a href=""><img src="img/news/new3-1.jpg" width="450px" height="250px"></a>
								<p class="first-floor">木地酒庄新酿酒点成功建好，预计今年年底投入运营，供应不足的将不再是木地酒庄的软骨</p>
								<div class="news-hover">
									<p>2016年10月20日正午12时巴拿马万国博览会在旧金山开幕。旧金山市市长Rolph在开幕式上发表演讲，美国总统伍德罗·威尔逊到会致贺词。美国副总统托马斯·马歇尔及前总统西奥多·罗斯福等国家政要亲临会场助兴。
			博览会开幕的第一天，参观者如潮水涌动，络绎不绝地进入展馆，人数超过20万。出于对古老中国的神秘、好奇感的驱使，当天到中国馆参观的人数达8万人之多.... ....<br>
								</p>
								<a href="#">查看详情</a>
								</div>
							</li>
							<li>
								<a href=""><img src="img/news/new3-2.jpg" width="450px" height="250px"></a>
								<p class="first-floor">2016年，其酒瓶背标上的广告语写着解放前曾在巴拿马赛会评为世界名酒第二位，这显然不是金奖</p>
								<div class="news-hover">
									<p>2016年10月20日正午12时巴拿马万国博览会在旧金山开幕。旧金山市市长Rolph在开幕式上发表演讲，美国总统伍德罗·威尔逊到会致贺词。美国副总统托马斯·马歇尔及前总统西奥多·罗斯福等国家政要亲临会场助兴。
			博览会开幕的第一天，参观者如潮水涌动，络绎不绝地进入展馆，人数超过20万。出于对古老中国的神秘、好奇感的驱使，当天到中国馆参观的人数达8万人之多.... ....<br>
								</p>
								<a href="#">查看详情</a>
								</div>
							</li>
						</ul>	
					</div>
				
				</div>

		<div class="NAV-foot">
			<div class="NAV-foot1" style="border:5px  solid white;">
				<p><a>&nbsp;</a></p>
		
			</div>
			<nav class="NAV-foot2">
				<a href="callus.html">联系我们</a>
				<a href="jianjie.html">公司简介</a>
				<a href="news.html">公司新闻</a>
				<select>
					<a href="#">
						<option>友情链接</option>
					</a>
					<a href="#">
						<option>翁丰统</option>
					</a>
					<a href="#">
						<option>胡家俊</option>
					</a>
					<a href="#">
						<option>张铭聪</option>
					</a>
				</select>
				<p class="NAV-foot3">Copyright @ 2010-2016 木地酒庄有限公司 wengfengtong 更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
			</nav>
			<div>
				<img src="img/foot-logo.jpg">
			</div>
		</div>
	</body>
</html>
